<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
</head>
<body>
    <div id="main" style="height:400px; border:1px solid black">
	 	
    </div>
    <!-- ECharts单文件引入 -->
    <script src="../js/echart/source/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: '../js/echart/source'
        }
    });
     
     // 使用
     require(
         [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord',
            'echarts/chart/gauge',
            'echarts/chart/funnel',
            'echarts/chart/eventRiver',
            'echarts/chart/venn',
            'echarts/chart/treemap',
            'echarts/chart/tree',
            'echarts/chart/wordCloud',
            'echarts/chart/heatmap',
            'echarts/chart/map'
         ],
         function (ec) {
             // 基于准备好的dom，初始化echarts图表
             var myChart = ec.init(document.getElementById('main')); 
             
             var option = {
                backgroundColor:'#000',
                 tooltip: {
                     show: true
                 },
                title : {
                    text : 'Title',
                    subtext: 'SubTitle',
                    textStyle: {
                        color: '#FFF'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },

                color: ['rgba(216,221,49,1)', 'green'],
                legend: {   
                    data: ['OpticalCable', 'UTP']
                },
                //工具栏
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },

                series:{
                    type:'map',
                    selectedMode : 'multiple',
                    mapType:'topo',
                    data:[],
                    markPoint:{
                        data : [
                            {name: '标注1', value: 100},
                            {name: '标注2', value: 200}
                        ],
                        geoCoord : {
                            "标注1": {x: 50, y: 50},
                            "标注2": {x: 150, y: 100} 
                        }
                    },

                    markLine:{
                        smooth : true,
                        effect:{
                            show: true,
                            scaleSize: 1,
                            period: 20,
                            color: '#fff',
                            shadowBlur: 5
                        },


                        data :[
                            {name: '标注1', value: 100},
                            {name: '标注2', value: 200}
                        ],
                        geoCoord : {
                            "标注1": {x: 50, y: 50},
                            "标注2": {x: 150, y: 100} 
                        }

                    }
                }

             };
             // 为echarts对象加载数据 
             myChart.setOption(option); 
         }
     );
	 </script>
</body>
</html>